<!--
 * @Description: 登录组件
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-08 09:35:25
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-22 13:57:40
-->
<template>
    <el-dialog
        custom-class="logins"
        :visible="visible"
        :close-on-click-modal="false"
        :append-to-body="true"
        @update:visible="update"
    >
        <div class="login-wrap">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <div class="j-title">验证码登录</div>
                <!-- 输入框 -->
                <div class="input-body">
                    <div class="input-box">
                        <el-form-item prop="phoneNumber">
                            <span class="iconshouji iconfont"></span>
                            <el-input
                                v-model="ruleForm.phoneNumber"
                                placeholder="请输入您的手机"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="input-box code-wrap">
                        <div class="left">
                            <el-form-item prop="code">
                                <span class="iconemail iconfont"></span>
                                <el-input
                                    v-model="ruleForm.code"
                                    placeholder="请输入您的验证码"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="code">
                            <div
                                class="btn plain_no"
                                :class="isGetCode ? 'getCode' : ''"
                                @click="getCode_click()"
                            >
                                {{ codeText }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 登录按钮 -->
                <div class="button-wrap">
                    <div class="btn" @click="submitForm('ruleForm')">
                        注册/登录
                    </div>
                </div>
                <!-- 提示信息 -->
                <div class="tips">未注册手机验证后自动登录</div>
            </el-form>
        </div>
    </el-dialog>
</template>
<script>
import { getcode, goLogin } from "~/api/login";
import { mapMutations } from 'vuex'
export default {
    props: {
        // 显示隐藏
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 表单数据
            ruleForm: {
                // 手机号
                phoneNumber: "",
                // 验证码
                code: "",
            },
            // 表单验证
            rules: {
                phoneNumber: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        message: "号码少于11位",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "change",
                    },
                ],
            },
            // 是否在获取验证码当中
            isGetCode: false,
            times: 60,
            timer: "",
        };
    },
    computed: {
        codeText() {
            if (this.isGetCode) {
                return this.times + "s";
            } else {
                return "获取验证码";
            }
        },
    },
    methods: {
        ...mapMutations([
            'set_isLogin',
            'set_token'
        ]),        
        // 显示隐藏
        update(val) {
            this.$emit("update:visible", val);
        },
        // 提交数据
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 发起登录请求
                    goLogin(this.ruleForm.phoneNumber,this.ruleForm.code).then(res => {
                        if(res.data.code === 0){
                            // 数据保存到 cookie
                            document.cookie = `token=${res.data.data}`;
                            // 将数据保存到vuex
                            this.set_token(res.data.data)
                            // 改变登录状态
                            this.set_isLogin(true);
                            // 关闭窗口
                            this.$emit("update:visible", false);
                        }else{
                            this.$message.error(res.data.msg);
                        }   
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 获取验证码
        getCode_click() {
            if (!this.isGetCode) {
                getcode(this.ruleForm.phoneNumber).then((res) => {
                    if (res.data.code === 0) {
                        this.isGetCode = true;
                        this.timer = setInterval(() => {
                            this.times--;
                            if (this.times === 0) {
                                clearInterval(this.timer);
                                this.isGetCode = false;
                                this.times = 60;
                            }
                        }, 1000);
                        this.$message.success('验证码已发送至您的手机上，请注意查收')
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            }
        },
    },
};
</script>
<style lang="scss">
.logins {
    width: 482px;
    .el-input__inner {
        border: none;
        border-bottom: 1px solid #eeeeee;
        border-radius: 0;
        padding-left: 30px;
        &:focus {
            border-color: $--color-primary;
        }
    }
}
@media screen and (max-width: 760px) {
    .logins {
        width: calc(100% - 20px);
    }
}
</style>
<style lang="scss" scoped>
.login-wrap {
    padding: 0 40px;
    .j-title {
        font-size: 22px;
        color: #000000;
    }
    .input-body {
        margin-top: 48px;
        .input-box {
            & + .input-box {
                margin-top: 30px;
            }
            position: relative;
            .iconfont {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                z-index: 10;
            }
        }
        .code-wrap {
            display: flex;
            justify-content: space-between;
            .left {
                position: relative;
                flex: 1;
            }
            .code {
                flex: 0 0 115px;
                .btn {
                    min-width: 115px;
                    height: 34px;
                    line-height: 34px;
                    font-size: 14px;
                    &.getCode {
                        cursor: wait;
                        &:hover {
                            background-color: transparent;
                            border-color: #cccccc;
                            color: #888888;
                        }
                    }
                }
            }
        }
    }
    .button-wrap {
        margin-top: 67px;
        .btn {
            width: 100%;
        }
    }
    .tips {
        font-size: 14px;
        color: #666666;
        margin-top: 30px;
    }
}
@media screen and (max-width: 760px) {
    .login-wrap {
        padding: 0;
    }
}
</style>